<% if (pageData.hero) { %>
    <!-- Hero Section -->
    <section class="bg-slate-900 rounded-t-2xl">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
            <div class="text-center relative">
                <div class="absolute top-0 left-1/2 -translate-x-1/2 w-96 h-96 bg-blue-500/20 rounded-full filter blur-3xl"></div>
                <h1 class="relative text-4xl font-bold text-white sm:text-5xl md:text-6xl">
                    <%= pageData.hero.title %>
                </h1>
                <p class="mt-6 text-xl text-slate-300 max-w-3xl mx-auto">
                    <%= pageData.hero.description %>
                </p>
                <div class="mt-10 flex flex-col sm:flex-row justify-center gap-4">
                    <% if (pageData.hero.primaryCta) { %>
                        <a href="<%= pageData.hero.primaryCta.url %>"
                           class="inline-flex items-center px-8 py-3 text-base font-medium rounded-lg text-white bg-blue-600 hover:bg-blue-700 transition-colors duration-200">
                            <%= pageData.hero.primaryCta.text %>
                        </a>
                    <% } %>
                    <% if (pageData.hero.secondaryCta) { %>
                        <a href="<%= pageData.hero.secondaryCta.url %>"
                           class="inline-flex items-center px-8 py-3 text-base font-medium rounded-lg text-slate-300 bg-slate-800 hover:bg-slate-700 transition-colors duration-200">
                            <%= pageData.hero.secondaryCta.text %>
                        </a>
                    <% } %>
                </div>
            </div>
        </div>
    </section>
<% } %>

<% if (pageData.features) { %>
    <!-- Features Section -->
    <section class="py-24 bg-slate-800">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center">
                <h2 class="text-base font-semibold text-blue-400 uppercase tracking-wide"><%= pageData.features.subtitle %></h2>
                <p class="mt-2 text-3xl font-bold text-white"><%= pageData.features.title %></p>
                <p class="mt-4 text-xl text-slate-300 max-w-3xl mx-auto"><%= pageData.features.description %></p>
            </div>

            <div class="mt-20">
                <div class="grid grid-cols-1 gap-8 lg:grid-cols-3">
                    <% pageData.features.items.forEach(function(feature) { %>
                        <div class="bg-slate-900 rounded-xl p-8 hover:bg-slate-700 transition-colors duration-300">
                            <div class="text-blue-500">
                                <%- feature.icon %>
                            </div>
                            <h3 class="mt-6 text-xl font-semibold text-white">
                                <%= feature.title %>
                            </h3>
                            <p class="mt-4 text-slate-300">
                                <%= feature.description %>
                            </p>
                        </div>
                    <% }); %>
                </div>
            </div>
        </div>
    </section>
<% } %>

<% if (pageData.stats) { %>
    <!-- Stats Section -->
    <section class="bg-slate-900 py-20">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center">
                <h2 class="text-3xl font-bold text-white"><%= pageData.stats.title %></h2>
                <p class="mt-4 text-xl text-slate-300 max-w-3xl mx-auto"><%= pageData.stats.description %></p>
            </div>
            <div class="mt-16 grid grid-cols-2 gap-8 sm:grid-cols-4">
                <% pageData.stats.items.forEach(function(stat) { %>
                    <div class="bg-slate-800 rounded-lg p-8 text-center">
                        <dt class="text-lg font-medium text-slate-300"><%= stat.label %></dt>
                        <dd class="mt-2 text-4xl font-bold text-blue-400"><%= stat.value %></dd>
                    </div>
                <% }); %>
            </div>
        </div>
    </section>
<% } %>

<% if (pageData.cta) { %>
    <!-- CTA Section -->
    <section class="bg-slate-800 rounded-b-2xl">
        <div class="max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:px-8">
            <div class="bg-gradient-to-r from-blue-600 to-blue-700 rounded-2xl shadow-xl">
                <div class="px-8 py-12 sm:px-16 sm:py-16 lg:flex lg:items-center lg:justify-between">
                    <div>
                        <h2 class="text-3xl font-bold tracking-tight text-white sm:text-4xl">
                            <%= pageData.cta.title %>
                        </h2>
                        <p class="mt-4 text-lg text-blue-100">
                            <%= pageData.cta.description %>
                        </p>
                    </div>
                    <div class="mt-8 lg:mt-0 lg:ml-8">
                        <a href="<%= pageData.cta.button.url %>"
                           class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-lg text-blue-600 bg-white hover:bg-blue-50 transition-colors duration-200">
                            <%= pageData.cta.button.text %>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>
<% } %>